<template>
    <view class="grid-card">
        <view class="cont-box" v-for="(numVal, index) in column" :key="numVal">
            <view class="grid-item" v-for="(item, j) in dataList.filter((_, idx) => idx % 2 === index)" :key="j">
                <uv-image :src="item.cover" class="grid-image" width="100%" mode="widthFix" :lazy-load="true"
                    :observeLazyLoad="true">
                    <template v-slot:error>
                        <view style="font-size: 24rpx;">加载失败</view>
                    </template>
                </uv-image>
                <view class="grid-info">
                    <uv-text :lines="2" class="grid-title" :text="item.title"></uv-text>
                    <view class="meta">
                        <text>{{ item.area }}㎡</text>
                        <text>{{ item.roomType }}</text>
                        <text>{{ item.district }}</text>
                    </view>
                    <view class="tags">
                        <view class="tag" v-for="(tag, index) in item.tags" :key="index">{{ tag }}</view>
                    </view>
                    <view class="price-wrap">
                        <text class="content-price">{{ item.price }}</text>
                        <text class="content-unit">{{ item.unit }}</text>
                        <text class="house-avg-price">{{ item.avgPrice }}</text>
                    </view>
                    <view v-if="item.desc">
                        <uv-divider :dashed="true" style="margin:10rpx 0"></uv-divider>
                        <uv-text color="#42b983" :size="12" :lines="1" class="grid-desc" :text="item.desc"></uv-text>
                    </view>
                </view>
            </view>
            <view v-if="status === 'loading'">
                <uv-skeletons :loading="true" :animate="true" :skeleton="skeleton"></uv-skeletons>
            </view>
        </view>
    </view>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { PropType } from 'vue'
import type { IHouseItem } from '@/types/house'

defineOptions({
    name: 'gridCard'
})

defineProps({
    dataList: {
        type: Object as PropType<IHouseItem[]>,
        required: true
    },
    status: {
        type: String,
        required: true
    }
})
const column = 2;

const skeleton = [{
    type: 'flex',
    style: 'width: 100%;', // 外层容器样式
    children: [{
        type: 'line',
        num: 4,
        gap: '20rpx',
        style: ['height:200rpx;marginRight: 10rpx;', 'height: 20rpx;marginRight: 10rpx;', 'width: 100rpx;height: 20rpx;marginRight: 10rpx;', 'width: 200rpx;height: 20rpx;marginRight: 10rpx;'],
    }]
}]
</script>
<style lang="scss" scoped>
.grid-card {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 20rpx;

    .cont-box {
        flex: 1;
        width: 100%;

        .grid-item {
            display: flex;
            flex-direction: column;
            gap: 10rpx;
            width: 100%;
            height: fit-content;
            transition: transform 0.3s ease;
            background: #fff;
            border-radius: 16rpx;
            box-shadow: $uni-box-shadow;
            overflow: hidden;
            margin-bottom: 20rpx;

            .grid-info {
                flex: 1;
                padding: 10rpx 10rpx 16rpx 10rpx;

                .grid-title {
                    &>span {
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    font-size: 28rpx;
                    color: #333;
                }

                .meta {
                    margin-top: 10rpx;
                    font-size: 24rpx;
                    color: #999;

                    text {
                        margin-right: 15rpx;
                    }
                }

                .tags {
                    .tag {
                        box-sizing: border-box;
                        display: -webkit-inline-box;
                        display: inline-flex;
                        background-color: #f3f5fb;
                        border-radius: 4rpx;
                        font-size: 24rpx;
                        line-height: 16rpx;
                        color: #667D91;
                        padding: 0 8rpx;
                        margin-right: 10rpx;
                        height: 32rpx;
                        -webkit-box-orient: horizontal;
                        -webkit-box-direction: normal;
                        flex-direction: row;
                        -webkit-box-align: center;
                        align-items: center;
                    }
                }

                .price-wrap {
                    margin-top: 5px;
                    font-size: 12px;
                    color: #0b0f12;
                    position: relative;

                    .content-price {
                        font-size: 19px;
                        font-family: Fang-din-SemiBold;
                        font-weight: 900;
                        color: #fd4d39;
                        vertical-align: -1px;
                    }
                }

                .content-unit {
                    font-family: PingFangSC-Medium;
                    font-weight: 500;
                    color: #fd4d39;
                }

                .house-avg-price {
                    font-family: PingFangSC-Regular;
                    font-size: 12px;
                    font-weight: 400;
                    color: #979b9e;
                    margin-left: 8px;
                }
            }
        }
    }
}
</style>